<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>热气球</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			position: relative;
			height: 100%;
		}

		body {
			background: #fff;
			font-family: Georgia, "Times New Roman", Times, serif;
			font-size: 14px;
			color: #fff;
			margin: 0;
			padding: 0;
			vertical-align: middle;
			display: flex;
			align-items: center;
			justify-content: center;
			perspective: 50vw;
			perspective-origin: 50% 50%;
		}

		.card {
			width: 185px;
			height: 260px;
			overflow: hidden;
			background-image: url(./img/sky.jpg);
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: 110% 110%;
			transform-origin: 50% 50%;
			perspective: 1800px;
			transform-style: preserve-3d;
			border-radius: 8px;
			box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
		}

		.card img {
			height: 40%;
			position: relative;
			bottom: 0;
			left: 5px;
		}
	</style>
</head>

<body>
	<div class="card">
		<img src="./img/removebg.png" alt="">
	</div>
	<script src="./js/anime.min.js"></script>
	<script>
		document.onmousemove = function (e) {
			e = e || window.event;
			let movex = 0;
			let movey = 0;
			if (e.pageX || e.pageY) {
				movex = e.pageX;
				movey = e.pageY
			}
			anime({
				targets: '.card',
				translateX: movex / 30 - 20,
				translateY: movey / 30 - 20,
				rotateX: -movey / 150 - 5,
				rotateY: movex / 150 - 5,
				duration: 1000,
				easing: 'easeOutCirc'
			});
			anime({
				targets: '.card img',
				translateX: movex / 15,
				translateY: movey / 30,
				scale: (1 - movex / 5000, 1 - movex / 5000),
				duration: 2000,
				easing: 'easeOutCirc'
			});
		}
	</script>
</body>

</html>